import React, { Component } from "react";

/* 
  在 react中,没有插槽的称呼,但是我们可以实现插槽和具名插槽
  如果需要使用具名插槽可以给元素添加一个标记使用的时候进行验证即可
*/

const Header = (props) => {
  // console.log(props);
  return (
    <>
      {props.children[0].props.id === "my" ? props.children[0] : null}
      <div>欢迎来到 {props.name} 班级</div>
      {props.children[1]}
    </>
  );
};

class Content extends Component {
  render() {
    // console.log(this);
    return (
      <>
        <div>
          {this.props.contentName} 学习 React 实际上就是在学 JavaScript
          <br />
          {this.props.ele}
        </div>
      </>
    );
  }
}

export default class App extends Component {
  render() {
    return (
      <>
        <Header name="H5-2218" num={10} bool={true}>
          <span id="my">我</span>
          <span>你</span>
        </Header>

        {/* 属性传值的时候,不仅可以传递数据,而且还可以传递标签和组件 */}

        <Content
          ele={
            <Header name="H5-2218" num={10} bool={true}>
              <span id="my">我</span>
              <span>你</span>
            </Header>
          }
          contentName="张一"
        />
      </>
    );
  }
}
